<!-- components/icons/IconDynamic.vue -->
<script setup lang="ts">
import { defineComponent, h, computed } from 'vue'

// 定义图标名称联合类型
type IconName = 'dashboard' | 'ecommerce' | 'messages' | 'reminder' | 'components' | 'authentication'
type IconDefinition = { paths: string[] }

const props = defineProps<{
    name: string  // 改为接受 string 类型
    size?: number
    active?: boolean
}>()

// 图标库定义
// 3. 给 icons 对象添加类型注解
const icons: Record<IconName, IconDefinition> = {
    dashboard: {
        paths: [
            'M5.936.278A7.983 7.983 0 0 1 8 0a8 8 0 1 1-8 8c0-.722.104-1.413.278-2.064a1 1 0 1 1 1.932.516A5.99 5.99 0 0 0 2 8a6 6 0 1 0 6-6c-.53 0-1.045.076-1.548.21A1 1 0 1 1 5.936.278Z',
            'M6.068 7.482A2.003 2.003 0 0 0 8 10a2 2 0 1 0-.518-3.932L3.707 2.293a1 1 0 0 0-1.414 1.414l3.775 3.775Z'
        ]
    },
    ecommerce: {
        paths: ['M9 6.855A3.502 3.502 0 0 0 8 0a3.5 3.5 0 0 0-1 6.855v1.656L5.534 9.65a3.5 3.5 0 1 0 1.229 1.578L8 10.267l1.238.962a3.5 3.5 0 1 0 1.229-1.578L9 8.511V6.855ZM6.5 3.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm4.803 8.095c.005-.005.01-.01.013-.016l.012-.016a1.5 1.5 0 1 1-.025.032ZM3.5 11c.474 0 .897.22 1.171.563l.013.016.013.017A1.5 1.5 0 1 1 3.5 11Z']
    },
    messages: {
        paths: [
            'M13.95.879a3 3 0 0 0-4.243 0L1.293 9.293a1 1 0 0 0-.274.51l-1 5a1 1 0 0 0 1.177 1.177l5-1a1 1 0 0 0 .511-.273l8.414-8.414a3 3 0 0 0 0-4.242L13.95.879ZM11.12 2.293a1 1 0 0 1 1.414 0l1.172 1.172a1 1 0 0 1 0 1.414l-8.2 8.2-3.232.646.646-3.232 8.2-8.2Z',
            'M10 14a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5Z'
        ]
    },
    reminder: {
        paths: [
            'M6.753 2.659a1 1 0 0 0-1.506-1.317L2.451 4.537l-.744-.744A1 1 0 1 0 .293 5.207l1.5 1.5a1 1 0 0 0 1.46-.048l3.5-4ZM6.753 10.659a1 1 0 1 0-1.506-1.317l-2.796 3.195-.744-.744a1 1 0 0 0-1.414 1.414l1.5 1.5a1 1 0 0 0 1.46-.049l3.5-4ZM8 4.5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1ZM9 11.5a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z'
        ]
    },
    components: {
        paths: [
            'M.06 10.003a1 1 0 0 1 1.948.455c-.019.08.01.152.078.19l5.83 3.333c.053.03.116.03.168 0l5.83-3.333a.163.163 0 0 0 .078-.188 1 1 0 0 1 1.947-.459 2.161 2.161 0 0 1-1.032 2.384l-5.83 3.331a2.168 2.168 0 0 1-2.154 0l-5.83-3.331a2.162 2.162 0 0 1-1.032-2.382Zm7.856-7.981-5.83 3.332a.17.17 0 0 0 0 .295l5.828 3.33c.054.031.118.031.17.002l5.83-3.333a.17.17 0 0 0 0-.294L8.085 2.023a.172.172 0 0 0-.17-.001ZM9.076.285l5.83 3.332c1.458.833 1.458 2.935 0 3.768l-5.83 3.333c-.667.38-1.485.38-2.153-.001l-5.83-3.332c-1.457-.833-1.457-2.935 0-3.767L6.925.285a2.173 2.173 0 0 1 2.15 0Z'
        ]
    },
    authentication: {
        paths: [
            'M11.442 4.576a1 1 0 1 0-1.634-1.152L4.22 11.35 1.773 8.366A1 1 0 1 0 .227 9.634l3.281 4a1 1 0 0 0 1.59-.058l6.344-9ZM15.817 4.576a1 1 0 1 0-1.634-1.152l-5.609 7.957a1 1 0 0 0-1.347 1.453l.656.8a1 1 0 0 0 1.59-.058l6.344-9Z'
        ]
    }
}

// 类型保护：验证字符串是否为合法图标名
const isValidIcon = (name: string): name is IconName => {
    return name in icons
}

// 计算属性：安全获取图标组件
const iconComponent = computed(() => {
    return isValidIcon(props.name)
        ? getIconComponent(props.name)
        : null // 或返回一个默认图标
})

const getIconComponent = (name: IconName) => {
    return defineComponent({
        render() {
            return h('g', icons[name].paths.map(path => h('path', { d: path })))
        }
    })
}
</script>

<template>
    <svg class="shrink-0 fill-current" :class="[active ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500']"
        :width="size" :height="size" viewBox="0 0 16 16">
        <component :is="iconComponent" v-if="iconComponent" />
        <!-- 可添加 v-else 显示默认图标 -->
    </svg>
</template>